<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios查询所有用户使用Vue3在表格中显示</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        // 引入vue3
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data() {
                return {
                    users: []
                }
            },
            mounted() {
                // 查询所有用户
               axios.get('http://localhost:8099/users/all').then((result)=>{
                   this.users = result.data.data;
               }).catch((err=>{
                   console.log(err);
               }))
            }
        }).mount('#app')
    </script>
</head>
<body>
<div>
    <div id="app">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>详情信息</th>
                <th>状态</th>
                <th>余额</th>
                <th>操作</th>
            </tr>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.info}}</td>
                <td>{{user.status}}</td>
                <td>{{user.balance}}</td>
                <td>
                    <a href="#">修改</a>
                    <a href="#">删除</a>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>